import { ref } from 'vue'
import { findTopCategory } from '@/api/category'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
// 路由缓存？ id变了 但是内容没有重新获取
// 原因: 性能考虑一个优化动作默认就有 当路径path没变的情况下会直接复用对应的组件

// 复用组件 -> 组件不会初始化 -> 初始化生命周期钩子函数都不会重新执行(setup) ->
// useCategory不执行 -> loadCategory不执行！！！ 接口无法重新发送

// 解决思路：1.不走缓存  2.让id每次变化的时候loadCategory重新执行

// 解决方案：
// 1.router-view 加一个独一无二的key
// 2. onBeforeRouterUpdate 路由每次变化时都会触发的一个钩子函数
export function useCategory () {
  const categoryData = ref({})
  const route = useRoute()

  // 函数参数默认值
  async function loadCategory (id = route.params.id) {
    const res = await findTopCategory(id)
    categoryData.value = res.data.result
  }
  loadCategory()

  onBeforeRouteUpdate((to) => {
    // id变化之后 这里每次都会重复执行
    // 问题: route.params.id 拿到的id并不对 拿到不是最新的id
    // to: 跳转到的最新的路由 路由对象
    // to.params.id 就可以拿到当前最新的参数id 使用它获取数据即可
    // console.log(to.params.id)
    loadCategory(to.params.id)
  })
  return {
    categoryData
  }
}
